<template>
	<layout>
		<view class="content">
			<img class="logo" src="https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg" />
			<uni-card>
				<view style="text-align: center;">
					<p><strong><span style="font-family: 微软雅黑;font-size: 14px">{{title}}</span></strong></p>
				</view>
			</uni-card>
			<view class="ranking-box">
				<view class="head-img">
					<img src="@/static/images/icons/ranking_list.png" />
				</view>
				<view class="ranking-content">
					<template v-for="(item, index) in ranks">
						<view class="ranking-list">
							<view class="rank-top">
								<template v-if="index===0">
									<img src="@/static/images/icons/ranking_1.png" mode="widthFix" />
								</template>
								<template v-else-if="index===1">
									<img src="@/static/images/icons/ranking_2.png" mode="widthFix" />
								</template>
								<template v-else-if="index===2">
									<img src="@/static/images/icons/ranking_3.png" mode="widthFix" />
								</template>
								<template v-else>
									<view style="text-align:center;color:#333;font-weight:normal;">{{index+1}}</view>	
								</template>
							</view>
							<view class="rank-info">
								<view class="rank-info-left">
									<view class="rank-info-portrait">
										<img :src="item.img_path" mode="widthFix"/>
									</view>
									<view class="rank-info-content">
										<span style="color: #999;margin: 0 15rpx;">{{item.number}}号</span>
										<span>{{item.label}}</span>
									</view>
								</view>
								<view class="rank-info-right">
									{{item.number}}票
								</view>
							</view>
						</view>
					</template>
				</view>
			</view>
		</view>
	</layout>
</template>

<script>
	import {
		mapActions
	} from 'vuex'
	import uniCard from '@/components/uni-card/uni-card.vue'
	import layout from '@/components/layout/index.vue'
	
	export default {
		data() {
			return {
				title: "\"XXX\"团体摄影大赛",
				ranks: [
					{
						label: '邱金宝',
						img_path: 'https://cdn.zfgeek.com/mfc/photos/TnHnFgPD3KBgzEX1MwimPBKiJI8Jvp886LtRNQbM.jpeg',
						vote_count: 14590,
						number: 11
					},
					{
						label: '邱金宝',
						img_path: 'https://cdn.zfgeek.com/mfc/photos/TkswRABevpJ3bQWRr2Kkl8lGvQmfMCwwWk9ZrMGO.jpeg',
						vote_count: 14590,
						number: 11
					},
					{
						label: '邱金宝',
						img_path: 'https://cdn.zfgeek.com/mfc/photos/P86gFBGw4dpgC03jdeyGfOBH7gpat6NATUzo0kdW.jpeg',
						vote_count: 14590,
						number: 11
					},
					{
						label: '邱金宝',
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
						vote_count: 14590,
						number: 11
					},					{
						label: '邱金宝',
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
						vote_count: 14590,
						number: 11
					},					{
						label: '邱金宝',
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
						vote_count: 14590,
						number: 11
					},					{
						label: '邱金宝',
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
						vote_count: 14590,
						number: 11
					},					{
						label: '邱金宝',
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
						vote_count: 14590,
						number: 11
					},					{
						label: '邱金宝',
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
						vote_count: 14590,
						number: 11
					},					{
						label: '邱金宝',
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
						vote_count: 14590,
						number: 11
					},					{
						label: '邱金宝',
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
						vote_count: 14590,
						number: 11
					},					{
						label: '邱金宝',
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
						vote_count: 14590,
						number: 11
					},					{
						label: '邱金宝',
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
						vote_count: 14590,
						number: 11
					},					{
						label: '邱金宝',
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
						vote_count: 14590,
						number: 11
					},					{
						label: '邱金宝',
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
						vote_count: 14590,
						number: 11
					},					{
						label: '邱金宝',
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
						vote_count: 14590,
						number: 11
					},					{
						label: '邱金宝',
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
						vote_count: 14590,
						number: 11
					},					{
						label: '邱金宝',
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
						vote_count: 14590,
						number: 11
					},					{
						label: '邱金宝',
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
						vote_count: 14590,
						number: 11
					},					{
						label: '邱金宝',
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
						vote_count: 14590,
						number: 11
					},					{
						label: '邱金宝',
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
						vote_count: 14590,
						number: 11
					},					{
						label: '邱金宝',
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
						vote_count: 14590,
						number: 11
					},					{
						label: '邱金宝',
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
						vote_count: 14590,
						number: 11
					},					{
						label: '邱金宝',
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
						vote_count: 14590,
						number: 11
					},					{
						label: '邱金宝',
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
						vote_count: 14590,
						number: 11
					},					{
						label: '邱金宝',
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
						vote_count: 14590,
						number: 11
					},					{
						label: '邱金宝',
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
						vote_count: 14590,
						number: 11
					},					{
						label: '邱金宝',
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
						vote_count: 14590,
						number: 11
					},					{
						label: '邱金宝',
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
						vote_count: 14590,
						number: 11
					},					{
						label: '邱金宝',
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
						vote_count: 14590,
						number: 11
					},					{
						label: '邱金宝',
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
						vote_count: 14590,
						number: 11
					},					{
						label: '邱金宝',
						img_path: 'https://cdn.zfgeek.com/mfc/photos/UNMngKbiM1rn3AZ8tUXxfQbzz1E4Q5b0Jytf86EW.jpeg',
						vote_count: 14590,
						number: 11
					},
				]
			}
		},
		onLoad() {
			const {
				setNavigationBarTitle
			} = this
	
			setNavigationBarTitle()
		},
		components: {
			uniCard,
			layout
		},
		methods: {
			...mapActions(['setNavigationBarTitle'])
		}
	}
</script>

<style scoped lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-bottom: 150rpx;
		.logo {
			width: 100%;
			min-height: 100rpx;
		}
	
		.uni-card {
			width: 95%;
			border-radius: 5px;
			color: #333;
			font-size: .37333rem;
			text-align: justify;
			white-space: pre-wrap;
			line-height: 1.6;
		}
		
		.ranking-box {
			width: 95%;
			text-align: center;
			position: relative;
			
			margin: 20rpx 0;
			
			.head-img {
				img {
					width: 100%;
					height: 100rpx;
				}
				
				position: absolute;
				width: 350rpx;
				left: 0;
				right: 0;
				margin: auto;
			}
			
			.ranking-content {
				font-weight: 400;
				min-height: 500rpx;
				background: #FFFFFF;
				margin-top: 15rpx;
				border-radius: 5px;
				padding: 100rpx 5%;
				.ranking-list {
					line-height: 90rpx;
					text-align: left;
					display: flex;
					margin-bottom: 20rpx;
					.rank-top {
						width: 8%;
						margin: 0 4%;
						position: relative;
						img {
							position: absolute;
							margin: auto;
							top: 0;
							bottom: 0;
							width: 100%;
							height: auto;
						}
					}
					.rank-info {
						width: 78%;
						display: flex;
						.rank-info-left {
							text-align: left;
							width: 70%;
							display: flex;
							.rank-info-portrait {
								width: 120rpx;
								position: relative;
								overflow: hidden;
								img {
									position: absolute;
									margin: auto;
									top: 0;
									bottom: 0;
									width: 100%;
									height: auto;
								} 
							}
						}
						.rank-info-content {
						}
						.rank-info-right {
							text-align: right;
							width: 30%;
						}
					}
				}
			}
		}
		
		.foot {
			color: #fff;
			margin: 20rpx 0;
		}
	}
</style>
